<template>
  <!-- 封面图 -->
    <div class="banner" ref="banner">
        <!--<span style="color: #ffffff;font-size: 2.5em;font-weight: bolder;letter-spacing: 5px;">南风知我意，吹梦到西洲</span>-->
        <div style="background-color:rgba(255,255,255,0.3);padding: 80px">
      <span
              style="color: rgba(255,255,255,1);font-size: 2.5em;font-weight: bolder;letter-spacing: 5px;">世界上有两个我</span>
            <br>
            <span
                    style="color: rgb(215,137,111);font-size: 2.5em;font-weight: bolder;letter-spacing: 5px;">一个举杯邀明月，一个跪地捡碎银</span>
        </div>
        <div style="position: absolute;bottom: 10%;left: 50%">
            <el-button text
                       @click="down"
                       style="font-weight: bolder;font-size: 2em;color: #b4aaaa">
                <el-icon>
                    <Bottom/>
                </el-icon>
            </el-button>
        </div>
    </div>

    <el-row :gutter="20">
        <el-col :span="3"></el-col>
        <el-col :span="13">
            <div v-for="(blog,index) in newBlogs">
                <!-- 能被2整除的图片放左边 -->
                <div class="blog" v-if="index % 2 ===0">
                    <el-image fit="cover" class="blogImg" :src="blog.blogImg" @click="toBlog(blog.blogId)"></el-image>
                    <div style="flex: 1;padding: 40px">
                        <a :href="'/article/'+blog.blogId" class="blog_title">{{ blog.blogTitle }}</a>
                        <br>
                        <!-- 创建时间 -->
                        <p style="color: #a2a9ab">
                            <el-icon>
                                <Calendar/>
                            </el-icon>
                            {{ blog.createTime }}
                        </p>
                        <!--分类-->
                        <el-link style="margin-right: 30px" :href="'/categories/'+blog.blogCategoryId">
                            <el-icon>
                                <Money/>
                            </el-icon> &nbsp; {{ blog.blogCategoryName }}
                        </el-link>

                        <!--标签-->
                        <el-icon>
                            <Discount/>
                        </el-icon>&nbsp;
                        <template v-for="(tag,index) in blog.tags">
                            <template v-if="index > 0" :key="tag.tagId"> |</template>
                            <el-tag @click="toTag(tag.tagId)">{{ tag.tagName }}</el-tag>
                        </template>

                        <!-- 阅读量 -->
                        <span>
              <el-icon style="margin-left: 30px">
                <View/>
              </el-icon>&nbsp;
              {{ blog.blogViews }} 阅读
            </span>

                        <!-- 正文摘要 -->
                        <div class="article-content">{{ blog.blogAbstract }}</div>

                    </div>
                </div>
                <!-- 不是2的倍数的图片放右边 -->
                <div class="blog" v-else>
                    <div style="flex: 1;padding: 40px">
                        <a :href="'/article/'+blog.blogId" class="blog_title">{{ blog.blogTitle }}</a>
                        <br>
                        <!-- 创建时间 -->
                        <p style="color: #a2a9ab">
                            <el-icon>
                                <Calendar/>
                            </el-icon>
                            {{ blog.createTime }}
                        </p>
                        <!--分类-->
                        <el-link style="margin-right: 30px" :href="'/categories/'+blog.blogCategoryId">
                            <el-icon>
                                <Money/>
                            </el-icon> &nbsp; {{ blog.blogCategoryName }}
                        </el-link>

                        <!--标签-->
                        <el-icon>
                            <Discount/>
                        </el-icon>&nbsp;
                        <template v-for="(tag,index) in blog.tags">
                            <template v-if="index > 0" :key="tag.tagId"> |</template>
                            <el-tag @click="toTag(tag.tagId)">{{ tag.tagName }}</el-tag>
                        </template>

                        <!-- 阅读量 -->
                        <span>
              <el-icon style="margin-left: 30px">
                <View/>
              </el-icon>&nbsp;
              {{ blog.blogViews }} 阅读
            </span>

                        <!-- 正文摘要 -->
                        <div class="article-content">{{ blog.blogAbstract }}</div>

                    </div>
                    <el-image fit="cover" class="blogImg" :src="blog.blogImg" @click="toBlog(blog.blogId)"></el-image>
                </div>
            </div>
            <div style="text-align: center">
                <el-button @click="toAllBlogs">全部文章</el-button>
            </div>
        </el-col>
        <el-col :span="5">
            <el-card :body-style="{'text-align':'center'}">
                <el-image src="/blog-t.png" style="width: 50%;margin: 20px"></el-image>
                <br>
                <p style="font-size: 1.3em;font-weight: bolder;margin-bottom: 10px">蛋头博客</p>
                <p>真诚待人，不抱幻想</p><br>
                <el-divider></el-divider>


                <div style="display:flex;margin-top: 15px;text-align: center">
                    <div style="width: 31%">
                        <p>文章</p> <br>
                        <a href="/timeline" style="font-size: 1.5em;margin-top: 10px;color: #32a668">{{
                            blogCount
                            }} </a>
                    </div>
                    <el-divider direction="vertical" style="height: 80px"/>
                    <div style="width: 31%">
                        <p>分类</p> <br>
                        <a href="/categories"
                           style="font-size: 1.5em;margin-top: 10px;color: orangered">{{ categoryCount }} </a>

                    </div>
                    <el-divider direction="vertical" style="height: 80px"/>
                    <div style="width: 31%">
                        <p>标签</p> <br>
                        <a href="/tag" style="font-size: 1.5em;margin-top: 10px;color: #048edc">{{ tagCount }} </a>
                    </div>
                </div>
            </el-card>
            <el-card style="margin-top: 20px">
                <template #header>
                    <icon-to-top theme="outline" size="20" fill="#ff0000" :strokeWidth="3"/>
                    <span style="margin-left: 10px">置顶文章</span>
                </template>
                <template v-for="blog in topBlogs" :key="blog.blogId">
                    <div style="padding-bottom: 3px;margin-bottom: 10px;border-bottom: 1px solid #eeeeee">
                        <a :href="'/article/'+blog.blogId">{{ blog.blogTitle }}</a>
                    </div>
                </template>
            </el-card>
            <el-card style="margin-top: 20px">
                <template #header>
                    <icon-fire theme="outline" size="20" fill="#ff0000"/>
                    <span style="margin-left: 10px">阅读排行榜</span>
                    <span style="float: right">阅读量</span>
                </template>
                <template v-for="blog in viewTop10Blogs" :key="blog.blogId">
                    <div style="padding-bottom: 3px;margin-bottom: 10px;border-bottom: 1px solid #eeeeee">
                        <a :href="'/article/'+blog.blogId">{{ blog.blogTitle }}</a>
                        <span style="float: right">{{ blog.blogViews }}</span>
                    </div>
                </template>
            </el-card>
        </el-col>
        <el-col :span="3"></el-col>
    </el-row>
</template>

<script>
export default {
    name: "FrontIndex",
    data() {
        return {
            blogCount: 0,
            tagCount: 0,
            categoryCount: 0,
            newBlogs: [],
            topBlogs: [],
            viewTop10Blogs: []
        }
    }, created() {
        this.init()
    },
    methods: {
        down() {
            // console.log(this.$refs.banner.offsetHeight)
            window.scrollBy(0, this.$refs.banner.offsetHeight);
        },
        async init() {
            // 右侧数量统计
            let {data: countRes} = await this.$http.get("/api/data/indexGetCount")
            this.blogCount = countRes.dataMap.blogCount
            this.tagCount = countRes.dataMap.tagCount
            this.categoryCount = countRes.dataMap.categoryCount
            // 十条最新文章
            let {data: result} = await this.$http.get("/api/blog/getNewest")
            this.newBlogs = result.dataMap.blogs
            // 置顶文章
            let {data: topRes} = await this.$http.get("/api/blog/getTopBlogs")
            this.topBlogs = topRes.dataMap.blogs
            // 阅读排行榜
            let {data: viewTopRes} = await this.$http.get("/api/blog/getViewRankTop10")
            this.viewTop10Blogs = viewTopRes.dataMap.blogs
        },
        toBlog(blogId) {
            this.$router.push({path: '/article/' + blogId})
        },
        toTag(tagId) {
            this.$router.push({path: '/tag/' + tagId})
        },
        toAllBlogs() {
            this.$router.push({name: "allBlogs"})
        }
    }
}
</script>

<style scoped>
.banner {
    background-image: url('/headImg/article.jpg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    height: 90vh;
    width: 100%;
    margin-bottom: 20px;

    /*color: white;*/
    /*font-size: 3em;*/
    /*font-weight: bolder;*/
    text-align: center;
    padding-top: 200px;
}

.blog {
    display: flex;
    height: 220px;
    border-radius: 5px;
    border: 1px solid #dbe3e3;
    box-shadow: 0 4px 8px 0 rgba(66, 62, 62, 0.2), 0 6px 20px 0 rgba(121, 116, 116, 0.19);
    margin-bottom: 15px;
}

a.blog_title {
    color: #036b67;
    text-decoration-line: none;
    /*margin: 10px;*/
    font-size: 1.3em;
    font-weight: bolder;
}

a {
    color: #054643;
    text-decoration-line: none;
    /*margin: 10px;*/
    font-size: 1em;
    /*font-weight: bolder;*/
}

.blogImg {
    width: 30%;
    border-radius: 5px;
}

.article-content {
    margin-top: 15px;
    line-height: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>